<template>
  <el-menu-item v-if="data.menu_level == 0" @click="go(data)" :index="index">
    <span>{{data.menu_name}}</span>
  </el-menu-item>

  <el-sub-menu  v-if="data.menu_level != 0" :index="index" :style="{width}">
    <template #title>
      <el-icon><location /></el-icon>
      <span>{{ data.menu_name }}</span>
    </template>
    <div v-for="(childItem,key) in data.childItem">
      <SideMenu :data="childItem" :index="index+'-' + String(key)" @go="go" :width="width"/>
    </div>
  </el-sub-menu>
  
</template>
<script setup name='SideMenu'>
const emit = defineEmits(['go'])
const go = (url)=>{
  emit("go",url);
}
const props = defineProps({
  data: Object,
  index:String,
  width:String,
});
const width = props.width
const data = props.data
</script>